import Taro from "@tarojs/taro";
import {Image, View, Text} from "@tarojs/components";
import Building2 from './svg/building-2.svg';
import Heart from './svg/heart.svg';
import Megaphone from './svg/megaphone.svg';
import PartyPopper from './svg/party-popper.svg';
import Snowflake from './svg/snowflake.svg';
import Sun from './svg/sun.svg';
import Target from './svg/target.svg';
import Zap from './svg/zap.svg';
import './css/Navigation.css';

// const navItems = [
//   {icon: Building2, label: '分销商会议', id: 'dealer-meeting', color: 'from-purple-500 to-purple-600'},
//   {icon: Snowflake, label: '寒冰亮剑', id: 'ice-sword', color: 'from-cyan-500 to-cyan-600'},
//   {icon: Heart, label: '客户答谢会', id: 'customer-thanks', color: 'from-pink-500 to-pink-600'},
//   {icon: PartyPopper, label: '新春年会', id: 'new-year', color: 'from-red-500 to-red-600'},
//   {icon: Zap, label: '春雷行动', id: 'spring-thunder', color: 'from-blue-500 to-blue-600'},
//   {icon: Megaphone, label: '520路演', id: '520-roadshow', color: 'from-indigo-500 to-indigo-600'},
//   {icon: Sun, label: '骄阳行动', id: 'sunshine', color: 'from-orange-500 to-orange-600'},
//   {icon: Target, label: '目标冲刺动员', id: 'target-sprint', color: 'from-green-500 to-green-600'}
// ];

export default function Navigation() {

  const gotoPage = (category,categoryName) => {
    Taro.navigateTo({url: `/pages/train/index?category=${category}&categoryName=${categoryName}`});
  }

  return (
    <View>
      <View className='icon-container'>
        <View className='icon-item' style={{backgroundColor: '#A44EF4'}} onClick={() => {
          gotoPage('dealer-meeting','分销商会议')
        }}
        >
          <Image src={Building2} />
        </View>
        <View className='icon-item' style={{backgroundColor: '#07AFCE'}} onClick={() => {
          gotoPage('ice-sword','寒冰亮剑')
        }}
        >
          <Image src={Snowflake} />
        </View>
        <View className='icon-item' style={{backgroundColor: '#E94293'}} onClick={() => {
          gotoPage('customer-thanks','客户答谢会')
        }}
        >
          <Image src={Heart} />
        </View>
        <View className='icon-item' style={{backgroundColor: '#EC3F3F'}} onClick={() => {
          gotoPage('new-year','新春年会')
        }}
        >
          <Image src={PartyPopper} />
        </View>
      </View>
      <View className='text-container'>
        <View className='text-item'>
          <Text className='icon-label'>分销商会议</Text>
        </View>
        <View className='text-item'>
          <Text className='icon-label'>寒冰亮剑</Text>
        </View>
        <View className='text-item'>
          <Text className='icon-label'>客户答谢会</Text>
        </View>
        <View className='text-item'>
          <Text className='icon-label'>新春年会</Text>
        </View>
      </View>
      <View className='icon-container'>
        <View className='icon-item' style={{backgroundColor: '#377CF4'}} onClick={() => {
          gotoPage('spring-thunder','春雷行动')
        }}
        >
          <Image src={Zap} />
        </View>
        <View className='icon-item' style={{backgroundColor: '#5F5FEE'}} onClick={() => {
          gotoPage('520-roadshow','520路演')
        }}
        >
          <Image src={Megaphone} />
        </View>
        <View className='icon-item' style={{backgroundColor: '#F56C13'}} onClick={() => {
          gotoPage('sunshine','骄阳行动')
        }}
        >
          <Image src={Sun} />
        </View>
        <View className='icon-item' style={{backgroundColor: '#20BC59'}} onClick={() => {
          gotoPage('target-sprint','目标冲刺动员')
        }}
        >
          <Image src={Target} />
        </View>
      </View>
      <View className='text-container'>
        <View className='text-item'>
          <Text className='icon-label'>春雷行动</Text>
        </View>
        <View className='text-item'>
          <Text className='icon-label'>520路演</Text>
        </View>
        <View className='text-item'>
          <Text className='icon-label'>骄阳行动</Text>
        </View>
        <View className='text-item'>
          <Text className='icon-label'>目标冲刺动员</Text>
        </View>
      </View>
    </View>

  );
}
